import React, { useState } from "react";
import "./index.css";
import ZhenShi from "../../components/ZhenShi/index.tsx";
import DingDan from "../../components/DingDan/index.tsx";
import Mybutton from "../../components/Mybutton/index.tsx";
import { Popup, Cell } from "react-vant";
import { useNavigate } from "react-router-dom";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const [visible, setVisible] = useState(false);
  const user = JSON.parse(localStorage.getItem("userinfor") as string) || "";
  const shenzhi = () => {
    navigate("/shenzhi");
  };
  const haohao = () => {
    navigate("/wodeshi");
  };
  const xinxi = () => {
    navigate("/mymessage");
  };
  const liaotian = () => {
    navigate("/liaotianshi");
  };
  const shuoming = () => {
    navigate("/shuoming");
  };
  const tz = () => {
    navigate("/chartkf");
  };
  return (
    <div className="my">
      <div className="top">
        {user ? (
          <div className="user">用户名：{user.nickname}</div>
        ) : (
          <div className="felt">
            <button
              onClick={() => {
                window.location.href = "/login";
              }}
            >
              登录/注册
            </button>
          </div>
        )}
        <div className="right">
          <a onClick={shenzhi}>设置</a>
          <a onClick={xinxi}>消息</a>
          <a onClick={() => setVisible(true)}>切换模式</a>
          <Popup visible={visible} onClose={() => setVisible(false)}>
            <div
              style={{
                width: "200px",
                height: "100px",
                lineHeightStep: "30px",
              }}
            >
              <div>
                <p>
                  <Cell
                    title="长辈模式>"
                    onClick={() => setVisible(false)}
                    style={{ fontSize: "16px", lineHeightStep: "30px" }}
                  />
                </p>
                <p>
                  <Cell
                    title="标准模式>"
                    onClick={() => setVisible(false)}
                    style={{ fontSize: "16px", lineHeightStep: "30px" }}
                  />
                </p>
              </div>
            </div>
          </Popup>
        </div>
        <div className="top_xia" onClick={() => tz()}>
          <a>反馈/投诉</a>
        </div>
      </div>
      <div className="zhenshi" onClick={haohao}>
        <ZhenShi></ZhenShi>
      </div>
      <div className="zhenshi_bottom">
        <a>去查看</a>
      </div>
      <div className="box_order">
        <DingDan></DingDan>
      </div>
      {/* 身体 */}
      <div className="button">
        <Mybutton></Mybutton>
        <div className="footer" onClick={shuoming}>
          <p>港澳台、海外用户使用说明</p>
        </div>
      </div>
    </div>
  );
};

export default Index;
